<script setup>
import { onHide } from '@dcloudio/uni-app'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getCurrentInstance } from 'vue'
import { useUserStore, useMessageStore } from '@/stores'

const userSore = useUserStore()
const messageStore = useMessageStore()
const instance = getCurrentInstance()

onLoad(async () => {
  // if (!userSore.user?.token) {
  //   return uni.reLaunch({ url: '/pages/login/login' })
  // }
  uni.hideTabBar()
  instance.proxy.$forceUpdate()
  // 以下为业务代码处
  await Promise.all([messageStore.getUnReadCount()])
})

onShow(() => {
  // if (!userSore.user?.token) {
  //   return uni.reLaunch({ url: '/pages/login/login' })
  // }
  uni.hideTabBar()
  instance.proxy.$forceUpdate()
})

onHide(() => {
  uni.showTabBar()
  instance.proxy.$forceUpdate()
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const onTo = (key) => {
  if (key === 'home') return
  uni.switchTab({ url: `/pages/${key}/${key}` })
}
</script>

<template>
  <view class="home" :style="{ paddingTop: safeAreaInsets.top + 10 + 'px' }">
    <!-- header -->
    <view class="title flex justify-center">数字镇街治理平台</view>
    <!-- main -->
    <scroll-view scroll-y="true" class="main" style="height: calc(100% - 242rpx)">
      <view class="flex flex-wrap justify-center" style="gap: 20rpx">
        <view class="card flex flex-column justify-center items-center">
          <view class="card-label">预警消息</view>
          <view class="card-value">13</view>
        </view>
        <view class="card flex flex-column justify-center items-center">
          <view class="card-label">报警消息</view>
          <view class="card-value">13</view>
        </view>
      </view>

      <view class="flex flex-wrap justify-center" style="gap: 20rpx">
        <view class="card flex flex-column justify-center items-center">
          <view class="card-label">预警消息</view>
          <view class="card-value">13</view>
        </view>
        <view class="card flex flex-column justify-center items-center">
          <view class="card-label">报警消息</view>
          <view class="card-value">13</view>
        </view>
      </view>
      <view class="flex flex-wrap justify-center" style="gap: 20rpx">
        <view class="card flex flex-column justify-center items-center">
          <view class="card-label">预警消息</view>
          <view class="card-value">13</view>
        </view>
        <view class="card flex flex-column justify-center items-center">
          <view class="card-label">报警消息</view>
          <view class="card-value">13</view>
        </view>
      </view>
      <view class="flex flex-wrap justify-center" style="gap: 20rpx">
        <view class="card flex flex-column justify-center items-center">
          <view class="card-label">预警消息</view>
          <view class="card-value">13</view>
        </view>
        <view class="card flex flex-column justify-center items-center">
          <view class="card-label">报警消息</view>
          <view class="card-value">13</view>
        </view>
      </view>
    </scroll-view>
    <!-- tabBar -->
    <view class="home-tabBar flex justify-around">
      <view class="flex flex-column items-center" @click="onTo('home')">
        <image src="../../static/tabs/home_index.png"></image>
        <text>首页</text>
      </view>
      <uni-badge
        :text="`${messageStore.unReadCount}`"
        absolute="rightTop"
        :offset="[-3, 6]"
        :custom-style="{ padding: '10rpx 15rpx 0', lineHeight: '20rpx' }"
      >
        <view class="home-tabBar-message flex flex-column items-center" @click="onTo('message')">
          <image src="../../static/tabs/message_index.png"></image>
          <text>消息</text>
        </view>
      </uni-badge>
      <view class="flex flex-column items-center" @click="onTo('my')">
        <image src="../../static/tabs/my_index.png"></image>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.home {
  width: 100vw;
  height: 100vh;
  background-image: url('../../static/images/home/home-bg.png');
  background-size: 100% 100%;
  color: #fff;
  .title {
    font-size: 48rpx;
    font-weight: 700;
  }
  .main {
    padding-top: 142rpx;
    .card {
      width: 344rpx;
      height: 288rpx;
      margin-bottom: 20rpx;
      background-image: url('../../static/images/home/home-card-bg.png');
      background-size: 100% 100%;
      &-label {
        font-size: 28rpx;
        font-weight: 400;
      }
      &-value {
        font-size: 96rpx;
        color: #00cbff;
      }
    }
  }
  &-tabBar {
    width: 100%;
    height: 55px;
    background-image: url('../../static/tabs/home_tabBar_bg.png');
    background-size: 100% 100%;
    padding-top: 10rpx;
    color: #00cbff;
    position: fixed;
    bottom: 50rpx;
    font-size: 12px;
    font-weight: 400;
    image {
      width: 56rpx;
      height: 56rpx;
    }
    &-message {
      position: relative;
    }
  }
}
</style>
